<script setup name="App" lang="ts">
import axios from 'axios'

interface IResponse<T> {
  data: T
  message: string
}

const getChannels = async () => {
  // !get 的第一个泛型参数其实的控制的是 r.data 的类型
  // { channels: { id: number; name: string }[] }
  const r = await axios.get<IResponse<{ channels: { id: number; name: string }[] }>>('http://geek.itheima.net/v1_0/channels')
  // 后端返回的数据格式是统一的，都有 data 和 message，只不过 data 的数据格式不一样
  // const r2 = await axios.get<IResponse<string>>('http://geek.itheima.net/v1_0/channels')
  // const r3 = await axios.get<IResponse<number>>('http://geek.itheima.net/v1_0/channels')
  // const r4 = await axios.get<{ data: number[]; message: string }>('http://geek.itheima.net/v1_0/channels')
  const r5 = await axios.get<IResponse<string[]>>('http://geek.itheima.net/v1_0/channels')

  // get 的返回值是 Promise<R>
  // R 是 AxiosResponse<T>，T 是我写 get 的时候传递过去的第一个泛型实参
  //
  // get<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
  // r. 这有提示，为什么？
  console.log(r.data.data.channels)
}
getChannels()
</script>
<template>
  <div>App</div>
</template>
